import { Component, OnInit } from '@angular/core';
import * as d3 from "d3";

const d = {
  apparentTemperatureHigh: 17.29,
  apparentTemperatureHighTime: 1514844000,
  apparentTemperatureLow: 4.51,
  apparentTemperatureLowTime: 1514887200,
  apparentTemperatureMax: 17.29,
  apparentTemperatureMaxTime: 1514844000,
  apparentTemperatureMin: -2.19,
  apparentTemperatureMinTime: 1514808000,
  cloudCover: 0.02,
  date: "2018-01-01",
  dewPoint: -1.67,
  humidity: 0.54,
  icon: "clear-day",
  moonPhase: 0.48,
  precipIntensity: 0,
  precipIntensityMax: 0,
  precipProbability: 0,
  pressure: 1028.26,
  summary: "Clear throughout the day.",
  sunriseTime: 1514809280,
  sunsetTime: 1514842810,
  temperatureHigh: 18.39,
  temperatureHighTime: 1514836800,
  temperatureLow: 12.23,
  temperatureLowTime: 1514894400,
  temperatureMax: 18.39,
  temperatureMaxTime: 1514836800,
  temperatureMin: 6.17,
  temperatureMinTime: 1514808000,
  time: 1514782800,
  uvIndex: 2,
  uvIndexTime: 1514822400,
  visibility: 10,
  windBearing: 309,
  windGust: 13.98,
  windGustTime: 1514829600,
  windSpeed: 4.16,
}
export type WeatherItem = typeof d;
// @ts-ignore
import  {jsPanel}  from 'jspanel4/es6module/jspanel.min.js'
@Component({
  selector: 'app-javascript',
  template:  `
    <h1>React Angular Vue Jquery</h1>

  `,
  styles: [
    `
      :host {
        background: #fff;
        width: 100%;
      }
    `
  ]
})
export class JavascriptComponent implements OnInit {

  constructor() { }
  width = 600
  dimensions = {
    width: this.width,
    height: this.width * 0.6,
    margin: {
      top: 30,
      right: 10,
      bottom: 50,
      left: 50,
    },
  }
  boundedWidth = this.dimensions.width - this.dimensions.margin.left - this.dimensions.margin.right;
  boundedHeight = this.dimensions.height - this.dimensions.margin.top - this.dimensions.margin.bottom;
  private async loadData(): Promise<WeatherItem[]> {
      return await d3.json('assets/mockdata/jsonFile/my_weather_data.json');
  }

  private drawBars(data: WeatherItem[]) {

    const xD = (d: WeatherItem) => d.humidity
  }
  async ngOnInit(): Promise<void> {
    const data = await this.loadData()
    console.table(data[0]);
    this.drawBars(data)
    console.log(this.dimensions)
    console.log(this.boundedHeight)
    console.log(this.boundedWidth)
  }

}
